
<template>
    <div class="container">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="user.name" label="姓名" placeholder="请填写姓名"
                    :rules="[{ required: true, message: '请填写姓名' }]" />
                <van-field v-model="user.tel" label="电话" placeholder="请填写电话号码"
                    :rules="[{ required: true, message: '请填写电话号码' }]" />  
                <van-field v-model="user.address" label="详细地址" placeholder="请填写详细地址"
                    :rules="[{ required: true, message: '请填写详细地址' }]" />
                <van-field name="switch" label="默认地址">
                <template #input>
                    <van-switch v-model="user.isDefault" size="20" />
                </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button  block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive,ref } from 'vue';
import { Toast } from 'vant'
import router from '@/router/index'
import { getAddressDetail } from '@/localhttp/loginApi'

type userInfo = {
    name: string,
    tel: string,
    address: string,
    isDefault?:boolean,
}

const user = ref<userInfo>({
    name: '',
    tel: '',
    address:'', 
    isDefault:true
})

onMounted(async () => {  
    user.value = await getAddressDetail(1);  
})

const onSubmit = () => {
    Toast(JSON.stringify(user.value))
    setTimeout(()=>{
        router.push({ name: "address" });
    },1000)
};

</script>

<style lang="scss" scoped>
.container {
    padding: 10px 0px;

    &-item {
        padding: 7px 0px;
    }

    &-btn {
        padding: 7px 10px;
    }
}
</style>
